<template>
<div class="pin-chart">
    <div v-if="label" class="select-filed-input">
        <span class="tips-label">目标列标签</span>
        <el-select filterable  v-model="filed" placeholder="请选择字段" @change="changeFiled">
            <el-option v-for="(item, i) in filedList" :key="i" :label="Object.keys(item)[0]" :value="Object.keys(item)[0]"></el-option>
        </el-select>
    </div>
    <div class="pinChart-box">
        <div id="pinChart"></div>
        <span v-if="!filedList" class="chart-no-data">暂无数据</span>
    </div>
    <vxe-table id="xTable" align="center" ref="xTable" resizable show-header-overflow height="400" border>
        <template v-for="(item, index) in tableColums">
            <vxe-table-column :key="index" :field="item.key" :title="item.title" show-overflow></vxe-table-column>
        </template>
    </vxe-table>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'BarChart',
    data () {
        return {
            label: false,
            filed: '',
            filedList: null,
            tableColums: [
                { key: 'filed', title: '类别' },
                { key: 'number', title: '数量' },
                { key: 'percent', title: '百分比' }
            ]
        }
    },
    mounted () {
        this.label = this.analysisReportData['label']
        this.init(true)
    },
    computed: {
        ...mapGetters({
            analysisReportData: 'common/getAnalysisReportData',
            univariateData: 'common/getUnivariateData'
        })
    },
    watch: {
        univariateData () {
            this.init(true)
        }
    },
    methods: {
        changeFiled () {
            this.init()
        },
        init (flag) {
            this.filedList = this.univariateData['饼图']
            let chartList = []
            let tableList = []
            if (this.filedList) {
                if (this.label) {
                    let currentItem = {}
                    if (flag) {
                        this.filed = Object.keys(this.filedList[0])[0]
                        currentItem = Object.values(this.filedList[0])[0]
                    } else {
                        currentItem = Object.values(this.filedList.filter(v => Object.keys(v)[0] === this.filed)[0])[0]
                    }
                    chartList = currentItem['饼图']
                    tableList = currentItem['饼图明细']
                } else {
                    chartList = this.filedList
                    tableList = this.univariateData['饼图明细']
                }
            }
            this.$refs.xTable.loadData(tableList)
            let seriesData = []
            for (let i = 0; i < chartList.length; i++) {
                seriesData.push({
                    name: Object.keys(chartList[i])[0],
                    value: Object.values(chartList[i])[0]
                })
            }
            let option = {
                tooltip: {
                    confine: true,
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)'
                },
                grid: {
                    containLabel: true
                },
                legend: {
                    show: false
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '50%',
                        center: '50%',
                        data: seriesData
                    }
                ]
            }
            let myChart = this.$echarts.init(document.getElementById('pinChart'), 'walden')
            myChart.setOption(option)
            window.addEventListener('resize', () => myChart.resize())
            this.$nextTick(() => {
                window.removeEventListener('resize', () => myChart.resize())
            })
        }
    }
}
</script>
<style lang="less">
    .pin-chart {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
        .select-filed-input {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .pinChart-box {
            width: 50%;
            height: 400px;
            position: relative;
            .chart-no-data {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 14px;
                color: #606266;
            }
        }
        #pinChart {
            height: 100%;
            width: 100%;
        }
        #xTable {
            width: 50%;
        }
    }
</style>
